<template>
	<view class="login">
		<view class="login-top">
			<image src="/static/image/logo.png" mode=""></image>
		</view>
		<view class="login-cencer">
			<view class="login-phone">
				<view class="login-phone-tex">
					<text>+86</text>
				</view>
				<view class="login-input">
					<input type="text" v-model="phoneValue" placeholder="输入手机号" />
				</view>
			</view>
			<view class="login-phone">
				<view class="login-input">
					<input type="text" v-model="passwordValue" placeholder="输入密码" />
				</view>
			</view>
			<view class="login-phone">
				<view class="login-input">
					<input type="text" placeholder="输入验证码" />
				</view>
				<view class="register" v-model="codewordValue" @click="verification">
					<text>获取验证码</text>
				</view>
			</view>
			<view class="login-sp">
				<view class="zhuce" @click="resgin">
					<text>用户登录</text>
				</view>
				<view class="wangji" @click="forget">
					<text>忘记密码</text>
				</view>
			</view>
		</view>
		<view class="login-bottom">
			<view class="bottom">
				<view class="bou" @click="login">
					<button type="primary" :disabled="loginClick">注册</button>
				</view>
			</view>
			<view class="login-radio">
				<view class="radio">
					<radio>
						我已阅读并同意《用户服务协议及隐私政策》
					</radio>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneValue: '17633638159', //手机号
				passwordValue: '123456789', //密码
				codewordValue: '', //验证码
				uuid: 'bded1c789e396afe', //唯一标识
			}
		},
		computed: {
			loginClick() {
				return this.phoneValue && this.passwordValue == '';
			}
		},
		onLoad() {
			// 获取设备信息
			// plus.device.getInfo({
			//         success:function(e){
			//             console.log('getDeviceInfo success: '+JSON.stringify(e));
			// 		},
			//         fail:function(e){
			//             console.log('getDeviceInfo failed: '+JSON.stringify(e));
			//         }
			//     });
			// console.log(plus.device.imei) //获取设备的国际移动设备身份码
			// console.log(plus.device.imsi) //获取设备的国际移动用户识别码
			// console.log(plus.device.model) //获取设备的型号
			// console.log(plus.device.vendor) //获取设备的生产厂商
		},
		methods: {
			//忘记密码
			forget() {
				uni.navigateTo({
					url: '/pages/public/forgetpassword'
				})
			},
			resgin() {
				uni.navigateTo({
					url: '/pages/bootpage/login'
				})
			},
			//注册
			login() {
				let params = {
					mobile: '15063335547',
					password: '123456',
					code: '',
				}
				this.$post(this.api.register, params).then((res) => {
					console.log(res);
				}).catch((err) => {
					console.log(err)
				})
				// uni.switchTab({
				// 	url: '/pages/index/index',
				// });
			},
			//验证码
			verification() {
				let security = {
					type: '1',
					mobile: '17633638159', //手机号
					ip: 'bded1c789e396afe', //标识
					imei: 'bded1c789e396afe',
					device: '12346', //设备信息
				}
				this.$post(this.api.verification, security).then((res) => {
					console.log(res);
				}).catch((err) => {
					console.log(err)
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.login {
		.login-top {
			width: 750rpx;
			height: 350rpx;

			image {
				width: 123rpx;
				height: 163rpx;
				position: relative;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -10%);
			}
		}

		.login-cencer {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 600rpx;

			.login-phone {
				height: 80rpx;
				display: flex;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #E0E0E0;

				.login-phone-tex {
					font-size: 32rpx;
					font-family: Arial;
					font-weight: 400;
					color: #333333;
					width: 70rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					border-right: 1rpx solid #E0E0E0;
				}

				.login-input {
					display: flex;
					justify-content: center;
					flex-direction: column;

					input {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						display: flex;
						justify-content: center;
						flex-direction: column;
						margin-left: 30rpx;
					}
				}

				.register {
					width: 200rpx;
					white-space: nowrap;
					display: flex;
					font-size: 32rpx;
					font-family: Arial;
					font-weight: 400;
					color: #333333;
					justify-content: center;
					flex-direction: column;

					text {
						font-size: 27rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #20A4FB
					}
				}
			}

			.login-sp {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.zhuce {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #20A4FB;
				}

				.wangji {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.login-bottom {
			margin-top: 80rpx;

			.bottom {
				.bou {
					width: 569rpx;
					height: 80rpx;
					background: linear-gradient(90deg, #2EA7E0 0%, #0099FF 100%);
					border-radius: 13rpx;
					margin: 0 auto;
					text-align: center;
					line-height: 80rpx;

					button {
						width: 569rpx;
						height: 80rpx;
						background: linear-gradient(90deg, #2EA7E0 0%, #0099FF 100%);
						border-radius: 13rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.login-radio {
				width: 530rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				white-space: nowrap;

				.radio {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					margin: 0 auto;
					color: #999999;
				}
			}

		}
	}
</style>
